<template>
	<view class="content">
		<view :style="{height: systemBarHeight + 'px'}">
		</view>
		<view class="navbar">
			<text>预 约</text>
		</view>

		<view class="page">
			<view class="swiper">
				<swiper style="height: 100%;" :indicator-dots="false" :autoplay="true" :interval="3000"
					:duration="1000">
					<swiper-item v-for="(item,index) in swiperimgsrc" :key="index">
						<view class="swiper-item">
							<image :src="item.src" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="notice">
				<view class="notice_img">
					<image src="/static/xy/gonggao.png" mode=""></image>
				</view>
				<view class="notice_tit">
					<text>安心出行，延误无忧！</text>
					<view class="dian">

					</view>
				</view>
				<view class="notice_ck">
					<image src="/static/xy/ck.png" mode=""></image>
				</view>
			</view>

			<view class="tabs">
				<view :class="subject=='科目二'?'tabs_item1':'tabs_item'" class="tabs_item" @click="kmtwochange(1)">
					<text>科目二</text>
				</view>
				<view :class="subject=='科目三'?'tabs_item3':'tabs_item2'" class="tabs_item2" @click="kmtwochange(2)">
					<text>科目三</text>
				</view>
			</view>

			<view class="from" v-if="stat==0">
				<view class="coach">
					<view class="coach_img">
						<image src="/static/logo.png" mode=""></image>
					</view>
					<view class="coach_info">
						<view class="coach_info1">
							<text>王教练</text>
						</view>
						<view class="coach_info2">
							<text>15012345678</text>
						</view>
					</view>
				</view>

				<view class="res_tit">
					<text>预约时间</text>
				</view>

				<view class="res_date">
					<view class="res_date_tit">
						<text>选择日期</text>
					</view>
					<view class="res_date_tt">
						<picker mode="date" @change="datechange">
							<view class="date1">
								<text>{{date ||'请选择日期'}}</text>
							</view>
						</picker>
					</view>
					<view class="res_ck">
						<image src="/static/xy/ck1.png" mode=""></image>
					</view>
				</view>
				<view class="res_time">
					<view class="res_time_tit">
						<text>选择时间</text>
					</view>

					<view class="res_time_t1">
						<picker mode="time" @change="startchsnge">
							<view class="time1">
								<text>{{starttime ||'开始时间'}}</text>
							</view>
						</picker>
					</view>
					<view class="heng">
						—
					</view>
					<view class="res_time_t2">
						<picker mode="time" @change="endchsnge">
							<view class="time1">
								<text>{{endtime ||'结束时间'}}</text>
							</view>
						</picker>
					</view>
					<view class="res_ck">
						<image src="/static/xy/ck1.png" mode=""></image>
					</view>
				</view>

				<view class="res_car">
					<view class="res_car_tit">
						<text>预约车辆</text>
					</view>

					<view class="res_car_list">
						<view class="res_car_item"
							:style="{background:carvalue==index?'#53DDA8':'',color:carvalue==index?'#FFFFFF':''}"
							:class="item.starts==true?'res_car_item1':'res_car_item'" v-for="(item,index) in carList"
							:key="index" @click="carchange(item,index)">
							<view :style="{background:carvalue==index?'#ffffff':'',color:carvalue==index?'#53DDA8':''}"
								:class="item.starts==true?'res_car_starts1':'res_car_starts'" class="res_car_starts">
								<text>{{item.start}}</text>
							</view>
							<view class="res_car_item_tit">
								<text>二号车</text>
							</view>
						</view>
					</view>
				</view>

				<view class="confim" @click="submitopen()">
					<text>预 约</text>
				</view>
			</view>

			<!--  -->
			<view class="form1" v-if="stat==1">
				<view class="from1_tit">
					<image src="/static/xy/wc.png" mode=""></image>
					<text>当前科目已完成</text>
				</view>
			</view>

			<!-- 修改密码 -->
			<view class="updatepassword">
				<u-popup :show="uppasswordshow" :round="10" mode="center" @close="passwordclose" @open="passwordopen">
					<view class="password">
						<view class="password_img">
							<image src="/static/xy/ts.png" mode=""></image>
						</view>
						<view class="password_tit">
							<text>温馨提示</text>
						</view>
						<view class="password_tit1">
							<text>学员使用该平台需要支付5元使用费</text>
						</view>
						<view class="password_bt1" @click="updatepassword()">
							<text>去修改</text>
						</view>
						<view class="password_bt2" @click="passwordclose()">
							<text>暂不修改</text>
						</view>
					</view>
				</u-popup>
			</view>

			<!-- 确认信息 -->
			<view class="submit">
				<u-popup :show="submitshow" :round="10" mode="bottom" @close="submitclose" @open="submitopen">
					<view class="submit_item">
						<view class="submit_tit">
							<text>确认信息</text>
							<image src="/static/xy/guanbi.png" mode="" @click="submitclose"></image>
						</view>

						<view class="coach">
							<view class="coach_img">
								<image src="/static/logo.png" mode=""></image>
							</view>
							<view class="coach_info">
								<view class="coach_info1">
									<text>王教练</text>
								</view>
								<view class="coach_info2">
									<text>15012345678</text>
								</view>
							</view>
						</view>

						<view class="yytit">
							<text>预约时间</text>
						</view>
						<view class="yy_item">
							<text>2025-01-10 15:00 至 2025-01-10 17:00</text>
						</view>

						<view class="cartit">
							<text>预约车辆</text>
						</view>

						<view class="car_item">
							<view class="car_item1">
								<text>二号车</text>
							</view>
						</view>

						<view class="submit_bt">
							<view class="submit_bt1">
								<text>取 消</text>
							</view>
							<view class="submit_bt2">
								<text>提 交</text>
							</view>
						</view>
					</view>
				</u-popup>
			</view>


			<!-- 匿名建议 -->
			<view class="nmjy">
				<u-popup :show="jyshow" :round="24" mode="bottom" @close="jyclose" @open="jyopen">
					<view class="jy">
						<view class="jy_tit">
							<text>匿名建议</text>
							<image src="/static/xy/guanbi.png" mode="" @click="jyclose()"></image>
						</view>
						<view class="jy_date">
							<text>2025-01-10 15:00 至 2025-01-10 17:00</text>
						</view>
						<view class="jy_type">
							<view class="type_item">
								<text>科目二</text>
							</view>
							<view class="type_item">
								<text>科目二</text>
							</view>
						</view>
						<view class="jy_jl">
							<text>王教练</text>
						</view>
						<view class="jy_pf">
							<uni-rate :touchable="false" :value="5" @change="onChange" />
							<text>{{rateValue}}分</text>
						</view>
						<view class="jy_jxjy">
							<text>对教练或驾校意见</text>
						</view>
						<view class="jy_shuru">
							<textarea value="" v-model="jyvalue" placeholder="请输入" placeholder-class="ipt" />
						</view>

						<view class="jy_bt">
							<view class="bt1" @click="jyclose()">
								<text>取 消</text>
							</view>
							<view class="bt2">
								<text>提 交</text>
							</view>
						</view>
					</view>
				</u-popup>
			</view>


		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				stat: 0,
				jyvalue: '',
				rateValue: 0,
				uppasswordshow: false,
				jyshow: false,
				submitshow: false,
				systemBarHeight: 0,
				current: 0,
				date: '',
				carvalue: 0,
				starttime: '',
				endtime: '',
				subject: '科目二',
				carList: [{
						tit: '二号车',
						start: '可预约',
						starts: false
					},
					{
						tit: '二号车',
						start: '不可约',
						starts: true
					},
					{
						tit: '二号车',
						start: '可预约',
						starts: false
					},
					{
						tit: '二号车',
						start: '可预约',
						starts: false
					},
				],

				swiperimgsrc: [{
						src: '/static/logo.png'
					},
					{
						src: '/static/logo.png'
					}
				],
				tabsList: [{
						tit: '科目二'
					},
					{
						tit: '科目三'
					}
				]
			}
		},
		mounted() {
			/* 手机顶部高度 */
			this.getSysteminfo()
		},
		methods: {
			/* 手机顶部高度 */
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			kmtwochange(i) {
				if(i==1){
					this.subject = '科目二'
				}
				if(i==2){
					this.subject = '科目三'
				}
				

				// :style="{background:subject=='科目二'?'#FFFFFF':'',height:subject=='科目二'?'100rpx':''}"

			},
			datechange(e) {
				console.log(e)
				this.date = e.detail.value
			},
			startchsnge(e) {
				console.log(e)
				this.starttime = e.detail.value
			},
			endchsnge(e) {
				this.endtime = e.detail.value
			},
			carchange(item, index) {
				if (item.starts == true) {
					uni.showToast({
						title: '不可选',
						icon: 'none'
					})
				} else {
					this.carvalue = index
				}
			},
			updatepassword() {
				uni.navigateTo({
					url: '/pages/index/updatepassword'
				})
			},
			passwordclose() {
				this.uppasswordshow = false
			},
			submitopen() {
				this.submitshow = true
			},
			submitclose() {
				this.submitshow = false
			},
			jyclose() {
				this.jyshow = false
			},
			jyopen() {
				this.jyshow = true
			},
			onChange(e) {
				console.log(e)
				console.log('rate发生改变:' + JSON.stringify(e))
				this.rateValue = e.value
				console.log(this.rateValue);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
	}

	.navbar {
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 34rpx;
		color: #43484D;

	}

	.page {
		width: 750rpx;
		padding-bottom: 38rpx;
		background: linear-gradient(180deg, #ECFFF8 0%, #F8F8F8 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.swiper {
		height: 412rpx;

		.swiper-item {
			width: 100%;
			height: 412rpx;

			>image {
				width: 750rpx;
				height: 412rpx;
			}
		}
	}

	.notice {
		position: relative;
		margin: -50rpx auto 0;

		width: 702rpx;
		height: 96rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(59, 174, 130, 0.2);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		display: flex;
		align-items: center;

		.notice_img {
			margin-left: 26rpx;
			width: 60rpx;
			height: 42rpx;
			padding-right: 20rpx;
			border-right: 2rpx solid #C4C4C4;

			>image {
				width: 60rpx;
				height: 42rpx;
			}
		}

		.notice_tit {

			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin-left: 20rpx;
			display: flex;
			align-items: center;

			.dian {
				width: 12rpx;
				height: 12rpx;
				background: #F5333C;
				border-radius: 6rpx;
				margin-left: 260rpx;
			}
		}

		.notice_ck {
			margin-left: auto;
			margin-right: 26rpx;
            height: 36rpx;
			>image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.tabs {
		height: 100rpx;
		width: 93%;
		display: flex;
		margin: 15rpx auto 0;

		.tabs_item {
			width: 50%;
			height: 84rpx;
			background: #FAFAFA;
			margin-top: auto;
			border-radius: 16rpx 0rpx 0rpx 0rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}

		.tabs_item1 {
			width: 50%;
			// height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx 0rpx 0rpx 0rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #53DDA8;
			box-shadow: 0rpx -4rpx 16rpx 0rpx #D4F2E6;

		}
		
		.tabs_item2{
			width: 50%;
			height: 84rpx;
			background: #FAFAFA;
			margin-top: auto;
			border-radius: 0rpx 16rpx 0rpx 0rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.tabs_item3{
			width: 50%;
			// height: 100rpx;
			background: #FFFFFF;
			border-radius: 0rpx 16rpx 0rpx 0rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #53DDA8;
			box-shadow: 0rpx -4rpx 16rpx 0rpx #D4F2E6;
		}
		
	}

	.from {
		width: 93%;
		margin: auto;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 24rpx 24rpx;
		padding-bottom: 40rpx;

		.coach {
			width: 80%;
			margin: auto;
			padding-top: 40rpx;
			display: flex;
			align-items: center;

			.coach_img {
				height: 80rpx;

				>image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
				}
			}

			.coach_info {
				margin-left: 16rpx;
				height: 80rpx;

				.coach_info1 {

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #43484D;

				}

				.coach_info2 {

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #43484D;

				}
			}
		}

		.res_tit {
			width: 90%;
			margin: 80rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #43484D;

		}

		.res_date {
			display: flex;
			align-items: center;
			width: 90%;
			margin: 30rpx auto 0;
			padding-bottom: 28rpx;
			border-bottom: 2rpx solid #F8F8F8;

			.res_date_tit {

				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #43484D;

			}

			.res_date_tt {
				margin-left: 40rpx;

				.date1 {

					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #BDC1C4;

				}
			}

			.res_ck {
				margin-left: auto;

				>image {
					width: 24rpx;
					height: 24rpx;

				}
			}
		}

		.res_time {
			width: 90%;
			margin: 30rpx auto 0;
			display: flex;
			align-items: center;

			.res_time_tit {

				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #43484D;


			}

			.res_time_t1 {
				margin-left: 40rpx;

				.time1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #BDC1C4;
				}
			}

			.heng {
				width: 28rpx;
				height: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #BDC1C4;
				margin-left: 40rpx;
				margin-right: 40rpx;
			}

			.res_time_t2 {
				.time1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #BDC1C4;
				}
			}

			.res_ck {
				margin-left: auto;

				>image {
					width: 24rpx;
					height: 24rpx;
				}
			}

		}

		.res_car {
			.res_car_tit {
				width: 90%;
				margin: 64rpx auto 0;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #43484D;

			}

			.res_car_list {
				display: flex;
				width: 90%;
				margin: auto;
				flex-wrap: wrap;

				.res_car_item {
					margin-top: 20rpx;
					margin-right: 24rpx;
					width: 148rpx;
					height: 88rpx;
					background: #FCFBFE;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #53DDA8;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #43484D;
					position: relative;

					.res_car_starts {
						position: absolute;
						top: 0;
						right: 0rpx;
						padding-left: 8rpx;
						padding-right: 8rpx;
						height: 24rpx;
						background: #53DDA8;
						border-radius: 0rpx 0rpx 0rpx 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 18rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;
					}

					.res_car_starts1 {
						position: absolute;
						top: 0;
						right: 0rpx;
						padding-left: 8rpx;
						padding-right: 8rpx;
						height: 24rpx;
						background: #DEDEDE;
						border-radius: 0rpx 0rpx 0rpx 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 18rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;
					}

				}

				.res_car_item1 {
					width: 148rpx;
					height: 88rpx;
					background: #F9F9F9;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: none;
				}


			}


		}

		.confim {
			width: 622rpx;
			height: 80rpx;
			background: #53DDA8;
			border-radius: 16rpx 16rpx 16rpx 16rpx;


			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 64rpx auto 0;
		}


	}

	.password {
		width: 616rpx;
		height: 594rpx;
		background: linear-gradient(180deg, #E4FFF5 0%, #FFFFFF 100%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.password_img {
			display: flex;
			justify-content: center;

			>image {
				width: 160rpx;
				height: 160rpx;
				margin-top: -80rpx;
			}
		}

		.password_tit {

			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 44rpx;
			color: #43484D;
			display: flex;
			justify-content: center;
			margin-top: 42rpx;
		}

		.password_tit1 {
			margin-top: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #5D5F5E;
			display: flex;
			justify-content: center;
		}

		.password_bt1 {
			width: 552rpx;
			height: 88rpx;
			background: #53DDA8;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 80rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.password_bt2 {
			width: 552rpx;
			height: 88rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #D7D5D1;
			margin: 32rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #43484D;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.submit_item {
		width: 750rpx;
		height: 750rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;

		.submit_tit {
			display: flex;
			align-items: center;
			position: relative;
			justify-content: center;
			padding-top: 32rpx;

			>image {
				position: absolute;
				right: 32rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}

		.coach {

			width: 92%;
			margin: 48rpx auto 0;
			display: flex;
			align-items: center;

			.coach_img {

				>image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
				}
			}

			.coach_info {
				height: 80rpx;
				margin-left: 16rpx;

				.coach_info1 {

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #43484D;
				}

				.coach_info2 {

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #43484D;

				}
			}

		}

		.yytit {
			width: 92%;
			margin: 40rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #43484D;
			line-height: 35rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.yy_item {
			width: 92%;
			height: 80rpx;
			margin: 16rpx auto 0;
			background: #FCFCFC;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: rgba(67, 72, 77, 0.8);

		}

		.cartit {
			width: 92%;
			margin: 40rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #43484D;
			line-height: 35rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.car_item {
			.car_item1 {
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: rgba(67, 72, 77, 0.8);
				width: 186rpx;
				height: 80rpx;
				background: #FCFCFC;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}

			width: 92%;

			margin: 16rpx auto 0;
		}

		.submit_bt {
			width: 92%;
			margin: 40rpx auto 0;
			display: flex;
			justify-content: space-between;

			.submit_bt1 {
				width: 332rpx;
				height: 88rpx;
				background: #EFEFEF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #7D7D7D;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.submit_bt2 {
				width: 332rpx;
				height: 88rpx;
				background: #53DDA8;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.form1 {
		width: 93%;
		margin: auto;
		height: 926rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 24rpx 24rpx;

		.from1_tit {
			padding-top: 40rpx;
			width: 100%;
			display: flex;
			flex-direction: column;

			>image {
				width: 622rpx;
				height: 396rpx;
				margin: auto;
			}

			>text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #717171;
				margin: 64rpx auto 0;
			}
		}
	}

	.jy {
		width: 750rpx;
		height: 944rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;

		.jy_tit {
			width: 93%;
			margin: auto;
			padding-top: 32rpx;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;

			>image {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 0rpx;
			}

			>text {
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #43484D;
			}
		}

		.jy_date {
			width: 93%;
			margin: 48rpx auto 0;

			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #43484D;
		}

		.jy_type {
			width: 93%;
			display: flex;
			margin: 16rpx auto 0;

			.type_item {
				width: 122rpx;
				height: 48rpx;
				background: #EBFFF7;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #459878;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 22rpx;
			}
		}

		.jy_jl {
			width: 93%;
			margin: 40rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #43484D;
		}

		.jy_pf {
			width: 93%;
			margin: 16rpx auto 0;
			display: flex;
			align-items: center;
			margin-left: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #43484D;
		}

		.jy_jxjy {
			width: 93%;
			margin: 40rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #43484D;
		}

		.jy_shuru {
			width: 93%;
			margin: 16rpx auto 0;
			background: #F9F9F9;

			>textarea {
				width: 100%;
				height: 200rpx;
				padding-left: 24rpx;
				padding-right: 24rpx;
				padding-top: 16rpx;
			}

			/deep/ .ipt {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #C4C4C4;
				padding-left: 24rpx;
			}

		}

		.jy_bt {
			width: 93%;
			margin: 80rpx auto 0;
			display: flex;
			justify-content: space-between;

			.bt1 {
				width: 332rpx;
				height: 88rpx;
				background: #EFEFEF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #7D7D7D;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.bt2 {
				width: 332rpx;
				height: 88rpx;
				background: #53DDA8;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}

		}
	}
</style>